<template>
  <div class="charts">
    <h2>近期天气</h2>
    <div class="echarts">
      <div class="text">
        <div class="today" v-for="item in result" :key="result.indexOf(item)">
          <span>周{{ arr[item.week - 1] }}</span>
          <span>{{ item.date.slice(5, 10) }}</span>
          <span>{{ item.dayweather }}</span>
          <span class="bt">风力{{ item.daypower }}级</span>
        </div>
      </div>
      <div id="main"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getIp } from '@/api/location'
import axios from 'axios'
export default {
  name: 'ChartsBox',
  data() {
    return {
      adcode: '',
      arr: ['一', '二', '三', '四', '五', '六', '日'],
      result: [],
    }
  },
  mounted() {
    this.currentCity()
  },
  methods: {
    currentCity() {
      getIp()
        .then((res) => {
          this.adcode = res.data.adcode
          // console.log(res)
        })
        .then(() => {
          axios({
            url: `https://restapi.amap.com/v3/weather/weatherInfo?city=${this.adcode}&key=b36dd440f158868263e0266de8cc36b8&extensions=all`,
            method: 'GET',
          })
            .then((res) => {
              this.result = res.data.forecasts[0].casts
              // console.log(res.data.forecasts[0].casts)
              return res.data.forecasts[0].casts
            })
            .then((res) => {
              // console.log(res)
              const daytemp = res.map((item) => item.daytemp)
              const nighttemp = res.map((item) => item.nighttemp)
              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('main'))
              // 绘制图表
              myChart.setOption({
                grid: {
                  x: 25, //左侧与y轴的距离
                  y: 50, //top部与x轴的距离
                  x2: 40, //右侧与y轴的距离
                  y2: -12, //bottom部与x轴的距离
                },
                tooltip: {},
                xAxis: {
                  show: false,
                  data: res.map((item) => item.date),
                },
                yAxis: {
                  show: false,
                },
                series: [
                  {
                    name: 'date',
                    type: 'line',
                    data: daytemp,
                    smooth: true,
                    label: {
                      show: true,
                      position: 'top',
                      textStyle: {
                        color: '#fff',
                        fontSize: 12,
                      },
                      formatter: function (params) {
                        return `白${params.value}℃`
                      },
                    },
                    lineStyle: {
                      color: '#5470C6',
                    },
                  },
                  {
                    name: 'date',
                    type: 'line',
                    data: nighttemp,
                    smooth: true,
                    label: {
                      show: true,
                      position: 'bottom',
                      textStyle: {
                        color: '#fff',
                        fontSize: 12,
                      },
                      formatter: function (params) {
                        return `晚${params.value}℃`
                      },
                    },
                    lineStyle: {
                      color: '#91CC75',
                    },
                  },
                ],
              })
            })
        })
    },
  },
}
</script>

<style scope>
.charts {
  width: 80%;
  margin: 20px auto 30px;
}
.charts h2 {
  margin-top: 45px;
  margin-bottom: 10px;
}
.echarts {
  display: flex;
  flex-direction: column;
  height: 384px;
  background-color: #014e70;
  border-radius: 5px;
}
.echarts .text {
  display: flex;
  justify-content: space-around;
  margin: 40px 40px 0 40px;
}
.echarts .text .today {
  display: flex;
  flex-direction: column;
  font-size: 16px;
}
.echarts .text .today span {
  margin: 10px;
}
.echarts .text .today .bt {
  margin: 10px 10px 0 10px;
}
.charts #main {
  width: 100%;
  height: 50%;
}
</style>
